<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        #inner{
            width:100%;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">

        <!--.stop  是vue中阻止冒泡(在这里面是先执行input后跟着div)-->
        <!--<div id="inner" @click="divHandle">-->
        <!--<input type="button" value="按钮" @click.stop="btnHandle"/>-->
        <!--</div>-->


        <!--.prevent 阻止默认行为-->
        <!--<a href="http://www.baidu.com" @click.prevent="link">有问题，先去百度</a>-->


        <!--.capture是捕获事件,先从div开始到input-->
        <!--<div id="inner" @click.capture="divHandle">-->
           <!--<input type="button" value="按钮" @click="btnHandle"/>-->
        <!--</div>-->

        <!--.self  实现只有点击当前元素时才会触发事件处理函数   .self只会阻止自己身上的冒泡行为，并不会真正阻止冒泡这个行为-->
        <!--<div id="inner" @click="divHandle">-->
            <!--<input type="button" value="按钮" @click.self="btnHandle"/>-->
        <!--</div>-->

        <!--.once只触发一次事件处理函数-->
        <a href="http://www.baidu.com" @click.once.prevent="link">有问题，先去百度</a>

        </div>

        <script>
            var vm = new Vue({
                el:'#app',
                data:{},
                methods: {
                    divHandle(){
                        console.log('div');
                    },
                    btnHandle(){
                        console.log('按钮');

                    },
                    link(){
                        console.log('触发了link点击事件');
                    }
                }
            });
        </script>
    </body>
    </html>